<script lang="ts" setup>
import { reactive, ref, onMounted, computed } from 'vue';
import utils from '../utils/util.ts';
import HelloWorld from '../components/HelloWorld.vue';

const baseUrl = ref('http://127.0.0.1:3000');
const form = ref<any>({ account: '', pass: '' });
onMounted(() => {
  getTest();
});
const submitForm = (form: object) => {
  console.log(form);
};
const resetForm = (form: object) => {
  console.log(form);
};

const canSubmit = computed(() => {
  const { account, pass } = form.value;
  console.log(Boolean(account && pass));
  return Boolean(account && pass);
});

// --接口使用示例
const getTest = () => {
  let url =
    baseUrl.value +
    `/webapi/eidData.ashx?oper=LTTG_Multifunction&storedPro=P_WXP_Patrol_CheckAuth&paraNum=1&resultSetNum=1&para1=`;
  let param = {
    storedPro: 'P_WXP_Patrol_CheckAuth',
    paraNum: 1,
    resultSetNum: 1,
    para1: '',
  };
  console.log(param);
  utils.getData(url, param).then((res: any) => {
    console.log(res);
    if (res.status == '1') {
    } else {
    }
  });
};
</script>
<template>
  <h3>个人登录</h3>
  <form @keyup.enter.native="resetForm(form)">
    <input v-model="form.name" placeholder="" placeholder-class="input-placeholder" @input="" />
    <input />
    <button open-type="" hover-class="button-hover" @click="">提交</button>
  </form>
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" status-icon label-width="auto" class="demo-ruleForm"
    @keyup.enter.native="submitForm(form)">
    <el-form-item label="Account" prop="account">
      <el-input v-model="form.account" />
    </el-form-item>
    <el-form-item label="Password" prop="pass">
      <el-input v-model="form.pass" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(form)" :disabled="!canSubmit">
        Submit
      </el-button>
      <el-button @click="resetForm(form)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>
